<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

  <div id="app">
    <router-link :to="{path:'/home', query:{id:'10001'}}" replace>Home</router-link>
    <span>&nbsp;|&nbsp;</span>
    <!-- <router-link :to="{path:'/about',name:'about', params:{id:'10002'}}" replace>About</router-link> -->
    <!-- 使用params传递参数，只能使用name进行引入 -->
    <router-link :to="{name:'about', params:{id:'10002'}}" replace>About</router-link>
    <span>&nbsp;|&nbsp;</span>
    <router-link to="/helloWorld" replace>HelloWorld</router-link>
    <br>
    <button @click="goToHelloWorld">跳转到导航页</button>
    <br>
    <span>#########################################下面是要跳转页面的内容###############################################</span>

 <router-view></router-view>
    <div>
      <Comment v-for="(item,index) in commentsArr" :info="item" :key="index"></Comment>
    </div>
  </div>

</template>

<script>
    //引入组件
    import Comment from './views/vue/Comment.vue'
    //引入数据文件
    import commentData from './views/js/data.js'

export default {
  name: 'App',
  components:{
    Comment,
  },
  data(){
    return {
      commentsArr: commentData,
    }
  },
  methods: {
    goToHelloWorld() {
      this.$store.dispatch('setId','10003');
      this.$router.push('/helloWorld');
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
img {
  width: 5%;
  height: 5%;
}
button {
  margin: 1% 1% 1% 1%;
}
</style>
